drow2DAxes(context);
var x1 = document.getElementById('x1');
var y1 = document.getElementById('y1');
var x2 = document.getElementById('x2');
var y2 = document.getElementById('y2');
var x3 = document.getElementById('x3');
var y3 = document.getElementById('y3');

x1.onmouseover = hint;
y1.onmouseover = hint;
x2.onmouseover = hint;
y2.onmouseover = hint;
x3.onmouseover = hint;
y3.onmouseover = hint;
var show = document.getElementById('show');
var refurbish = document.getElementById('refurbish');
refurbish.onclick = function () {
    location.reload();
}

/*
 *定义演示按钮单击触发事件
 */
async function buOnclick() {
    if (x1.value == '' || x2.value == '' || y1.value == '' || y2.value == '') {
        alert('请先输入！');
        return;
    }
    let dashC = '#9900FF'; //虚线（辅助线）颜色


    var x11 = 0;
    var x22 = 0;
    var x33 = 0;
    var y11 = 0;
    var y22 = 0;
    var y33 = 0;

    try {
        x11 = eval(x1.value);
        x22 = eval(x2.value);
        y11 = eval(y1.value);
        y22 = eval(y2.value);
    } catch (error) {
        alert("输入格式不正确，请重新输入！");
        return;
    }

    if (Math.abs(x11) > 12 || Math.abs(x22) > 12 ||
        Math.abs(y11) > 12 || Math.abs(y22) > 12) {
        alert('输入的范围有误，请输入的范围在12子内！');
        return;
    }

    x33 = x11 - x22;
    y33 = y11 - y22;

    context.save();
    context.lineWidth = 3;
    context.fillStyle = "black";
    context.font = "bold italic 20pt Times new roman";
    await drowVector3(context, x11, y11); //画出a向量
    context.fillText('a', x11 * c1, -y11 * c1);
    await drowVector3(context, x22, y22); //画出b向量
    context.fillText('b', x22 * c1, -y22 * c1);
    await drowVector3(context, -x22, -y22); //画出-b向量
    context.fillText('-b', -x22 * c1, y22 * c1);
    await drowDashedLine2(context, x11, y11, x33, y33, dashC);
    await drowDashedLine2(context, -x22, -y22, x33, y33, dashC);
    context.lineWidth = 3;
    await drowVector3(context, x33, y33);
    context.fillText('c', x33 * c1, -y33 * c1);
    context.restore();
    x3.value = x11 - x22;
    y3.value = y11 - y22;
}

show.addEventListener('click', buOnclick);